<template>
  <div>
    <el-card style="min-height: 600px">
      <el-row :gutter="24" style="background-color: #fcfcfc;padding: 5px 20px">
        <el-col :span="21">
          <el-button-group>
            <el-button type="success" icon="el-icon-back" @click="goBack">返回</el-button>
          </el-button-group>
        </el-col>
        <el-col :span="3">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
            <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
          </el-button-group>
        </el-col>
      </el-row>
      <el-descriptions border style="margin-bottom: 5px">
        <el-descriptions-item label="发货单号" label-style="width:8%" content-style="width:23%">{{ form.cdlcode }}</el-descriptions-item>
        <el-descriptions-item label="客户名称" label-style="width:8%" content-style="width:23%">{{ form.ccusname }}</el-descriptions-item>
        <el-descriptions-item label="出库数量" label-style="width:8%" content-style="width:23%">{{ form.iqty }}</el-descriptions-item>
        <el-descriptions-item label="产品编码" label-style="width:8%" content-style="width:23%">{{ form.cinvcode }}</el-descriptions-item>
        <el-descriptions-item label="产品名称" label-style="width:8%" content-style="width:23%">{{ form.cinvname }}</el-descriptions-item>
        <el-descriptions-item label="产品规格" label-style="width:8%" content-style="width:23%">{{ form.cinvstd }}</el-descriptions-item>
        <el-descriptions-item label="受理日期" label-style="width:8%" content-style="width:23%">{{ form.acceptDate }}</el-descriptions-item>
        <el-descriptions-item label="结案日期" label-style="width:8%" content-style="width:23%">{{ form.endlinedate }}</el-descriptions-item>
      </el-descriptions>
      <el-card style="min-height: 500px">
        <div class="cborder" style="font-weight: bold;text-align: center;">
          质检内容
        </div>
        <div style="display: flex">
          <div class="cborder" style="width: 10%;font-weight: bold;">
            <div>客户投诉</div>
            <div>内容描述</div>
          </div>
          <div class="cborder" style="width: 80%">
            <div style="margin-bottom: 10px">
            {{form.describe}}
            </div>
            <hr/>
            <span v-for="(item,index) in form.entitys" :key="index" >{{ index +1 }}.{{ item.info }}</span>
          </div>
          <div class="cborder" style="width: 10%;text-align: center">
            <div style="color: #1890ff;">{{ form.describeBy }}</div>
            <hr/>
            <div>市场经理</div>
          </div>
        </div>

        <div style="display: flex">
          <div class="cborder" style="width: 10%;font-weight: bold;">
            <div style="align-self: center">原因调查</div>
          </div>
          <div class="cborder" style="width: 80%">
            <div style="margin-bottom: 10px">
              {{form.reason}}
            </div>
          </div>
          <div class="cborder" style="width: 10%;text-align: center">
            <div style="color: #1890ff;">{{ form.reasonBy }}</div>
            <hr/>
            <div>责任部门</div>
          </div>
        </div>

        <div style="display: flex">
          <div class="cborder" style="width: 10%;font-weight: bold;">
            <div style="align-self: center">改善对策</div>
          </div>
          <div class="cborder" style="width: 80%">
            <div style="margin-bottom: 10px">
              {{form.countermeasure}}
            </div>
          </div>
          <div class="cborder" style="width: 10%;text-align: center">
            <div style="color: #1890ff;">{{ form.countermeasureBy }}</div>
            <hr/>
            <div>责任部门经理</div>
          </div>
        </div>

        <div style="display: flex">
          <div class="cborder" style="width: 10%;font-weight: bold;">
            <div style="align-self: center">效果确定</div>
          </div>
          <div class="cborder" style="width: 80%">
            {{form.result}}
          </div>
          <div class="cborder" style="width: 10%;text-align: center">
            <div style="color: #1890ff;">{{ form.resultBy }}</div>
            <hr/>
            <div>确认人</div>
          </div>
        </div>
      </el-card>
    </el-card>
  </div>
</template>
<script>
import { get } from '@/api/complaint'
import { getNext } from '@/api/complaint'
import { getLast } from '@/api/complaint'
export default {
  name: 'ComplaintView',
  data() {
    return {
      fileURL: process.env.VUE_APP_BASE_API,
      activeName: '质检内容',
      form: {}
    }
  },
  created() {
    this.getQuality(this.$route.query.id)
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getQuality(id) {
      get(id).then(res => {
        this.form = res.data.data
      })
    },

    goBack() {
      this.$router.back()
    },
    toNext() {
      getNext(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getQuality(this.$route.query.id)
        }
      })
    },
    toLast() {
      getLast(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getQuality(this.$route.query.id)
        }
      })
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
  .cborder{
    padding: 20px;
    border-collapse:collapse;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(69, 77, 86, 0.18);
    border-radius: 2px;
  }
</style>
